import React from 'react';
import { useState, useEffect } from 'react'
// 引入头部组件
import Header from '@/components/Header'
// 引入轮播图组件
import Myswiper from '@/components/Myswiper';
// 引入导航列表组件
import Mynavlist from '@/components/Mynavlist';
// 导入秒杀组件
import Secondkill from '@/components/Secondkill';
// 引入产品列表组件
import Prolist from '@/components/Prolist';
// 引入antd
import { InfiniteScroll, DotLoading, PullToRefresh } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'
// 当在脚手架项目中(无论是vue 还是react)使用, 只要在数据中定义图片, 使用的是静态相对路径地址
// 则会导致图片出现404 的情况? 因为 执行npm run dev/npm run start , 他会进行一个打包,
// 该打包后的包存在了浏览器内存中,开发者是看不见的, 打包的代码和执行npm run build 效果差不多一样.
// 执行npm run build 命令 然后将打包后的静态资源目录放在生产线上的服务器中(该包在build 目录中)
// 执行npm run dev 命令 将打包后的静态资源目录都放在了开发服务器中. (该包在内存中, 看不见)
// 如果使用静态路径数据图片导致打包后的图片的路径就变了, 所以出现404

// import img1 from '../assets/images/11.jpeg';
// import img2 from '../assets/images/22.jpeg';
// import img3 from '../assets/images/33.jpeg';
// 引入轮播图接口
import { getSwiperApi, getSeckillApi, getProlistApi } from '@/api/home';
const Home = () => {
    const [swiperArr, setSwiperArr] = useState([]);
    const [seckillArr, setseckillArr] = useState([]);
    const [prolist, setprolist] = useState([]);
    const [count, setcount] = useState(1);
    const [hasMore, setHasMore] = useState(true);
    async function loadMore() {
        //console.log('loadMore');
        // 每次滚动触发 loadMore 方法, 然后让当前页+1.则请求下一页数据
        setcount(count + 1);
        console.log('loadMore-count', count);
        const append = await getProlistApi({ count });
        //console.log('append', append);
        // 将最新的数据...append.data.data 拼接上一次的数据...prolist
        setprolist(val => [...prolist, ...append.data.data]);
        setHasMore(append.data.data.length > 0)
    }
    const InfiniteScrollContent = ({ hasMore }) => {
        return (
            <>
                {hasMore ? (
                    <>
                        <span>Loading</span>
                        <DotLoading />
                    </>
                ) : (
                    <span>--- 我是有底线的-逗你玩 ---</span>
                )}
            </>
        )
    }
    useEffect(() => {
        // 请求轮播图
        getSwiperApi().then(res => {
            // console.log(res);
            setSwiperArr(res.data.data)
        })
        //请求秒杀数据
        getSeckillApi({ count: 1, limitNum: 6 }).then(res => {
            // console.log('res', res);
            setseckillArr(res.data.data)
        })

        // 请求产品列表数据
        // getProlistApi({ count: 1, limitNum: 10 }).then(res => {
        //     console.log('res', res);
        //     setprolist(res.data.data)
        // })

    }, [])

    return (
        <div>
            {/* 头部组件 */}
            <Header></Header>
            <PullToRefresh onRefresh={async () => {
                await sleep(1000);
                // 重新请求数据,并重新赋值数据
                // console.log('PullToRefresh-count', count)

                getProlistApi({ count: 1 }).then(res => {
                    //console.log(res)
                    // if (res.data.data.length <= 0) {
                    //     setcount(2)
                    //     console.log('hasMore-1', hasMore)
                    // } else {
                    //     // 重新设置页码为2
                    //     setcount(count + 1)
                    //     console.log('hasMore-2', hasMore)
                    // }
                    setcount(2)
                    if (res.data.data.length > 0) {
                        setHasMore(res.data.data.length > 0)
                        setprolist([...res.data.data])
                    }

                })

            }}>
                {/* 轮播图组件 */}
                <Myswiper swiperArr={swiperArr}></Myswiper>
                {/* 导航组件 */}
                <Mynavlist></Mynavlist>
                {/* 秒杀组件 */}
                <Secondkill seckillArr={seckillArr}></Secondkill>
                {/* 产品列表组件 */}
                <Prolist prolist={prolist}></Prolist>
                {/* 无限滚动 */}
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
                    <InfiniteScrollContent hasMore={hasMore} />
                </InfiniteScroll>
            </PullToRefresh>
        </div>
    );
}

export default Home;
